<template>
	<view class="advance-pay">
		<UserDate :showDate='showDate' @changeDate='onChangeDate' @changeUser='onChangeUser'/>
		<u-tabs :list="list" :is-scroll="false" :current="current" :active-color='themeColorLight' @change="change"></u-tabs>
		<view class="advance-pay-main" v-show="current===0">
			<view class="advance-pay-main-group flexR">
				<view v-for="item in moneyGroup" :key="item.key" @click="handleMoney(item)" :class="active===item.key?'active':''">
					{{item.label}}
					<image class="img" src="../../static/images/imgs/check.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="advance-pay-main-input flexR">
				预交金额：<input type="number" v-model="money" />
			</view>
			<view class="reminder" style="padding-left: 20rpx; padding-right: 20rpx;">
				<view class="reminder-title">
					温馨提示
				</view>
				<view class="reminder-content">
					若需要退住院预交金，请到医院窗口上进行办理，微信暂不支持。
				</view>
			</view>
			<view style="height: 90rpx;" @click="onSubmit">
				<view class="theme-light-btn">
					提交
				</view>
			</view>
		</view>
		<view class="advance-pay-info" v-show="current===1" style="margin-top: 10rpx;">
			<view v-for="(item,index) in dataList" :key="index" class="card" style="margin-bottom: 10rpx;">
				<view class="title u-border-bottom">
					<view class="left">
						<text class="iconfont icon-baogaoguanli_huaban1"></text>
						<text>预交序号：{{item.dh||'5235653232323232'}}</text>
					</view>
					<view class="right">
					</view>
				</view>
				<view class="main flexR">
					<view class="left">
						<view class="row" v-for="cItem in cardLabel" :key='cItem.fKey'> <text style="">{{cItem.label}}</text>{{item[cItem.key]||'李丽仙'}} </view>
					</view>
				</view>
			</view>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import UserDate from '@/components/UserInfo/user-date.vue'
	import { themeColorLight } from '@/static/js/theme.js'
	import Load from '@/components/Load/index.vue'
	import { mapGetters, mapActions } from 'vuex'
	import tradePay from '@/utils/pay.js'
	import { getAdvancePayList } from '@/api/home.js'
	import {defaultDate} from '@/common/js/default-date.js'
	import { getPayStatusMY } from "@/api/system.js"
	export default {
		components:{ UserDate, Load },
		data() {
			return {
				themeColorLight,
				syxh:null,
				load:true,
				money:'500',
				timer:null,
				timeNumber:10000,
				active:'label1',
				list:[{name:'预交金缴存'},{name:'缴费记录查询'}],
				current:0,
				showDate:false,
				moneyGroup:[
					{
						label:500,
						key:'label1'
					},
					{
						label:1000,
						key:'label2'
					},
					{
						label:2000,
						key:'label3'
					},
					{
						label:5000,
						key:'label4'
					},
					{
						label:10000,
						key:'label5'
					},
					{
						label:'自定义',
						key:'label6'
					},
				],
				dataList:[],
				cardLabel:[
					{
						label:'发 票 号：',
						key:'fph',
						fKey:'label11'
					},
					{
						label:'预交日期：',
						key:'lrrq',
						fKey:'label21'
					},
					{
						label:'预交金额：',
						key:'yjje',
						fKey:'label31'
					}
				],
				queryDate:''
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		async onLoad(op) {
			this.syxh = op.syxh||null
			this.queryDate = defaultDate
			await this.$onLaunched
			this.load = false
			if(!this.userInfo.patId){
				uni.navigateTo({
					url:'/pages/Login/index'
				})
			}
		},
		methods: {
			...mapActions(['createPay']),
			getData(){
				let params = {
					syxh:this.syxh,
					jfsj:this.queryDate.startDate||''
				}
				this.load = true
				getAdvancePayList(params).then(data => {
					this.load = false
					this.dataList = data
				}).catch(e => {
					this.dataList = []
					this.load = false
				})
			},
			handleMoney(item){
				this.active = item.key
				if(item.label==='自定义'){
					this.money = ''
				}else{
					this.money = item.label
				}
			},
			change(val){
				if(val===0){
					this.showDate = false
				}else{
					this.showDate = true
					this.getData()
				}
				this.current = val
			},
			onSubmit(){
				if(this.money){
					let params = {
						money:this.money,
						patId:this.userInfo.patId,
						syxh:this.syxh,
						tradeType:3,
					}
					this.load = true;
					this.createPay(params).then((data)=>{
						this.load = false
						let paymentData
						// #ifdef MP-ALIPAY
						paymentData = data.tradeNo
						// #endif
						// #ifndef MP-ALIPAY
						paymentData = {
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.weChatPackage,
							signType: data.signType ,
							paysign: data.paySign
						}
						// #endif
						if(paymentData){
							// #ifdef MP-ALIPAY
							tradePay(paymentData, status => {
								if(status){
									let info = {
										outTradeNo:data.outTradeNo
									}
									this.getStatus(info, 1000)
								}else{
									this.$u.toast('系统错误')
								}
							})
							// #endif
							// #ifndef MP-ALIPAY
							tradePay(paymentData)
							// #endif
						}else{
							this.$u.toast('系统错误')
						}
					}).catch(e => {
						this.load = false
					})
				}else{
					this.$u.toast('请输入预交金额')
				}
			},
			// 轮询
			getStatus(info, refreshTime){
				this.load = true
				this.timer = setInterval(()=>{
					if(this.timeNumber<0){
						this.clearTimer()
						this.$u.toast('业务处理状态未知，请以具体消息通知为准')
					}
					this.timeNumber -= refreshTime
					getPayStatusMY(info).then(data => {
						if(data){
							let msg = ''
							if(data.tradeStatus==='WAIT_BUYER_PAY'||data.tradeStatus==='TRADE_CLOSED'){
								this.$u.toast('用户未支付')
								this.clearTimer()
							}else{
								if(data.payStatus===4){
									this.clearTimer()
									this.$u.toast('支付成功')
									uni.reLaunch({
										url:'/pages/Index'
									})
								}else if(data.payStatus===7){
									this.clearTimer()
									this.$u.toast('业务处理失败，已退款')
								}
							}
						}else{
							this.clearTimer()
						}
					}).catch( e=> {
						this.clearTimer()
					})
				}, refreshTime)
			},
			// 清除计时器
			clearTimer(){
				this.load = false
				if(this.timer){
					clearInterval(this.timer)
					this.timer = null
				}
			},
			onChangeUser(){
				if(this.current===0){
					this.$u.toast('切换成功')
				}else{
					this.getData()
				}
			},
			onChangeDate(val){
				this.queryDate = val
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.advance-pay{
		&-main{
			margin-top: 10rpx;
			padding: 40rpx 30rpx;
			height: calc(100vh - 90rpx - 80rpx);
			overflow: scroll;
			background-color: $uni-bg-color;
			&-group{
				flex-wrap: wrap;
				justify-content: space-between;
				>view{
					position: relative;
					height: 60rpx;
					line-height: 60rpx;
					width: 30%;
					text-align: center;
					border-radius: 6rpx;
					border: 1px solid $border-color;
					color: $text-color-grey;
					box-shadow: 3px 3px 3px rgba($color: #000000, $alpha: 0.05);
					margin: 10rpx;
					.img{
						height: 25rpx;
						width: 25rpx;
						position: absolute;
						right: 0;
						bottom: 0;
						z-index: -2;
					}
				}
				.active{
					border-color: $theme-color-light;
					z-index: 2;
				}
			}
			&-input{
				margin-top: 20rpx;
				// padding: 0 50rpx;
				padding-left: 20rpx;
				height: 60rpx;
				justify-content: flex-start;
				align-items: center;
				color: $text-color-grey;
				>input{
					border: 1px solid $border-color;
					border-radius: 30rpx;
					padding: 2px 10px;
				}
			}
		}
		&-info{
			height: calc(100vh - 90rpx - 80rpx);
			overflow: scroll;
		}
	}
</style>
